<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI模拟面试 - 结果分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #7209b7;
            --accent-color: #f72585;
            --background-color: #f8f9fa;
            --text-color: #333;
            --light-gray: #e9ecef;
            --border-radius: 12px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem 0;
            box-shadow: var(--box-shadow);
        }

        .header h1 {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .header p {
            opacity: 0.9;
            margin-bottom: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .result-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            margin-top: 2rem;
        }

        .result-header {
            background: linear-gradient(135deg, #f0f4ff, #e9f0ff);
            padding: 1.5rem;
            border-bottom: 1px solid var(--light-gray);
        }

        .result-header h2 {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0.75rem;
        }

        .score-display {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            font-size: 2.5rem;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
            position: relative;
            overflow: hidden;
        }

        .score-display::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .score-text {
            font-size: 0.875rem;
            margin-top: 0.5rem;
            color: #6c757d;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-gray);
        }

        .analysis-content {
            padding: 1.5rem;
        }

        .analysis-section {
            margin-bottom: 2rem;
        }

        .analysis-item {
            margin-bottom: 1.5rem;
        }

        .analysis-item h4 {
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 0.75rem;
        }

        .analysis-item p {
            color: #6c757d;
            margin-bottom: 0;
        }

        .strength-list, .improvement-list {
            list-style-type: none;
            padding-left: 0;
        }

        .strength-list li, .improvement-list li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
            color: #6c757d;
        }

        .strength-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }

        .improvement-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #ffc107;
            font-weight: bold;
        }

        .qa-container {
            margin-top: 2rem;
        }

        .qa-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .qa-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .qa-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .qa-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            font-size: 0.875rem;
            font-weight: 600;
            margin-right: 0.75rem;
        }

        .qa-question {
            font-weight: 500;
            flex: 1;
        }

        .qa-answer {
            background-color: #f8f9ff;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            border-left: 3px solid var(--primary-color);
        }

        .example-answer {
            background-color: #e8f5e8;
            padding: 1rem;
            border-radius: 8px;
            border-left: 3px solid #28a745;
        }

        .answer-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .example-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: #28a745;
            margin-bottom: 0.5rem;
        }

        .nav-pills .nav-link {
            border-radius: var(--border-radius);
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
        }

        .nav-pills .nav-link.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .pill-content {
            padding-top: 1.5rem;
        }

        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 1.5rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #3a56d4;
            border-color: #3a56d4;
            transform: translateY(-1px);
        }

        .btn-secondary {
            border-radius: var(--border-radius);
            margin-right: 0.5rem;
        }

        .action-buttons {
            text-align: center;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .score-display {
                width: 120px;
                height: 120px;
                font-size: 2rem;
            }
            
            .result-header h2 {
                font-size: 1.5rem;
            }
            
            .analysis-content {
                padding: 1rem;
            }
            
            .qa-card {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>AI模拟面试</h1>
            <p>面试结果分析与反馈</p>
        </div>
    </div>

    <div class="container">
        <div class="result-card">
            <div class="result-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h2>面试分析结果</h2>
                        <p class="mb-0">面试岗位: <span th:text="${interview?.jobTitle ?: 'Java开发工程师'}"></span></p>
                    </div>
                    <div class="col-md-4 text-md-right">
                        <div class="score-display">
                            <span th:text="${#numbers.formatInteger(#numbers.createInteger(analysis?.score), 0, 'DEFAULT')}" th:unless="${analysis?.score == null}"></span>
                            <span th:text="75" th:if="${analysis?.score == null}"></span>
                        </div>
                        <div class="score-text mt-2">综合评分</div>
                    </div>
                </div>
            </div>

            <div class="analysis-content">
                <!-- 选项卡导航 -->
                <ul class="nav nav-pills mb-4" id="resultTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="overview-tab" data-bs-toggle="pill" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">总体评价</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="detailed-analysis-tab" data-bs-toggle="pill" data-bs-target="#detailed-analysis" type="button" role="tab" aria-controls="detailed-analysis" aria-selected="false">详细分析</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="qa-tab" data-bs-toggle="pill" data-bs-target="#qa" type="button" role="tab" aria-controls="qa" aria-selected="false">问答详情</button>
                    </li>
                </ul>

                <!-- 选项卡内容 -->
                <div class="tab-content" id="resultTabsContent">
                    <!-- 总体评价 -->
                    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                        <div class="analysis-section">
                            <div class="analysis-item">
                                <h4>综合评价</h4>
                                <p th:text="${analysis?.suggestion ?: '根据您的面试表现，我们对您的专业能力和综合素质进行了评估。以下是我们的分析结果。'}"></p>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="analysis-item">
                                        <h4>优势</h4>
                                        <ul class="strength-list" th:if="${analysis?.strengths}">
                                            <li th:each="strength : ${analysis.strengths}" th:text="${strength}"></li>
                                        </ul>
                                        <ul class="strength-list" th:unless="${analysis?.strengths}">
                                            <li>积极参与面试，展现了良好的沟通能力</li>
                                            <li>对专业知识有一定的了解和掌握</li>
                                            <li>能够清晰地表达自己的想法和观点</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="analysis-item">
                                        <h4>改进建议</h4>
                                        <ul class="improvement-list" th:if="${analysis?.areasForImprovement}">
                                            <li th:each="improvement : ${analysis.areasForImprovement}" th:text="${improvement}"></li>
                                        </ul>
                                        <ul class="improvement-list" th:unless="${analysis?.areasForImprovement}">
                                            <li>可以更深入地准备与目标岗位相关的专业知识</li>
                                            <li>回答问题时可以结合具体案例，增强说服力</li>
                                            <li>可以提前了解行业最新动态和发展趋势</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 评分雷达图 -->
                        <div class="analysis-section">
                            <h4>能力维度评分</h4>
                            <div class="chart-container">
                            <canvas id="skillsRadarChart"></canvas>
                        </div>
                    </div>

                    <!-- 简历分析 -->
                    <div class="analysis-section">
                        <h4>简历分析</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="analysis-item">
                                    <h5>总体评分</h5>
                                    <p th:text="${resumeAnalysis?.overallScore} ? ${resumeAnalysis.overallScore} + '分' : '暂无评分'">暂无评分</p>
                                </div>
                                <div class="analysis-item">
                                    <h5>总体评价</h5>
                                    <p th:text="${resumeAnalysis?.evaluation} ?: '暂无评价'">暂无评价</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="analysis-item">
                                    <h5>优势</h5>
                                    <ul class="list-disc list-inside space-y-1" th:if="${resumeAnalysis?.strengths}">
                                        <li th:each="strength : ${resumeAnalysis.strengths}" th:text="${strength}"></li>
                                    </ul>
                                    <p th:unless="${resumeAnalysis?.strengths}">暂无信息</p>
                                </div>
                                <div class="analysis-item">
                                    <h5>改进建议</h5>
                                    <ul class="list-disc list-inside space-y-1" th:if="${resumeAnalysis?.suggestions}">
                                        <li th:each="suggestion : ${resumeAnalysis.suggestions}" th:text="${suggestion}"></li>
                                    </ul>
                                    <p th:unless="${resumeAnalysis?.suggestions}">暂无建议</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 简历与岗位匹配度分析 -->
                    <div class="analysis-section">
                        <h4>简历与岗位匹配度分析</h4>
                        <div class="analysis-item">
                            <p th:text="${resumeAnalysis?.suggestion ?: '根据您提供的简历和目标岗位要求，您的简历在整体上与岗位要求基本匹配。建议您突出与目标岗位直接相关的技能和经验。'}"></p>
                        </div>
                    </div>
                        </div>
                    </div>

                    <!-- 详细分析 -->
                    <div class="tab-pane fade" id="detailed-analysis" role="tabpanel" aria-labelledby="detailed-analysis-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="analysis-item">
                                    <h4>专业能力</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.technicalScore ?: 75}%|" th:aria-valuenow="${analysis?.technicalScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.technicalScore ? Math.round(analysis.technicalScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您的专业知识和技能掌握程度，包括理论基础和实践经验。</p>
                                </div>

                                <div class="analysis-item">
                                    <h4>沟通能力</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.communicationScore ?: 75}%|" th:aria-valuenow="${analysis?.communicationScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.communicationScore ? Math.round(analysis.communicationScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您的表达能力、逻辑清晰度和沟通技巧。</p>
                                </div>

                                <div class="analysis-item">
                                    <h4>解决问题能力</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.problemSolvingScore ?: 75}%|" th:aria-valuenow="${analysis?.problemSolvingScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.problemSolvingScore ? Math.round(analysis.problemSolvingScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您分析问题、寻找解决方案和执行能力。</p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="analysis-item">
                                    <h4>学习能力</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.learningScore ?: 75}%|" th:aria-valuenow="${analysis?.learningScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.learningScore ? Math.round(analysis.learningScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您的学习意愿、学习速度和知识迁移能力。</p>
                                </div>

                                <div class="analysis-item">
                                    <h4>团队合作能力</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.teamworkScore ?: 75}%|" th:aria-valuenow="${analysis?.teamworkScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.teamworkScore ? Math.round(analysis.teamworkScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您在团队中的协作态度、角色定位和贡献度。</p>
                                </div>

                                <div class="analysis-item">
                                    <h4>岗位匹配度</h4>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar" role="progressbar" th:style="|width: ${analysis?.matchingScore ?: 75}%|" th:aria-valuenow="${analysis?.matchingScore ?: 75}" aria-valuemin="0" aria-valuemax="100">
                                            <span th:text="${analysis?.matchingScore ? Math.round(analysis.matchingScore) : 75} + '%'"></span>
                                        </div>
                                    </div>
                                    <p>评估您的能力、经验与岗位要求的匹配程度。</p>
                                </div>
                            </div>
                        </div>

                        <div class="analysis-item">
                            <h4>具体改进建议</h4>
                            <p th:text="${analysis?.suggestion ?: '基于您的面试表现，我们建议您在以下方面进行改进：1. 深入了解目标岗位所需的核心技能；2. 准备更多具体的项目案例，突出您的实际贡献；3. 练习面试技巧，提高回答的逻辑性和条理性。'}"></p>
                        </div>
                    </div>

                    <!-- 问答详情 -->
                    <div class="tab-pane fade" id="qa" role="tabpanel" aria-labelledby="qa-tab">
                        <div class="qa-container">
                            <!-- 如果有真实问答数据，显示真实数据 -->
                            <div th:if="${qaList}" th:each="qa, index : ${qaList}" class="qa-card">
                                <div class="qa-header">
                                    <div class="qa-number" th:text="${index.index + 1}"></div>
                                    <div class="qa-question" th:text="${qa?.question ?: '暂无问题'}">暂无问题</div>
                                </div>

                                <div class="qa-answer">
                                    <div class="answer-label">您的回答</div>
                                    <p th:text="${qa?.answer ?: '暂无回答'}">暂无回答</p>
                                </div>

                                <div class="example-answer" th:if="${exampleQAs}">
                                    <div class="example-label">参考回答</div>
                                    <p th:text="${exampleQAs[index.index]?.answer ?: '暂无参考回答'}">暂无参考回答</p>
                                </div>
                            </div>

                            <!-- 如果没有问答数据，显示示例问答 -->
                            <div th:unless="${qaList}">
                                <div class="qa-card">
                                    <div class="qa-header">
                                        <div class="qa-number">1</div>
                                        <div class="qa-question">请介绍一下您的Java编程经验</div>
                                    </div>
                                    <div class="qa-answer">
                                        <div class="answer-label">您的回答</div>
                                        <p>我有3年Java开发经验，主要负责后端系统开发，熟悉Spring Boot、Spring MVC等框架。</p>
                                    </div>
                                    <div class="example-answer">
                                        <div class="example-label">参考回答</div>
                                        <p>我拥有3年Java开发经验，主要从事企业级应用开发。在过往项目中，我熟练运用Spring Boot、Spring Cloud等框架构建微服务系统，并使用MySQL、Redis等数据库进行数据存储和缓存。我善于解决复杂业务逻辑问题，注重代码质量和系统性能优化。</p>
                                    </div>
                                </div>
                                
                                <div class="qa-card">
                                    <div class="qa-header">
                                        <div class="qa-number">2</div>
                                        <div class="qa-question">什么是Spring Boot的自动配置机制</div>
                                    </div>
                                    <div class="qa-answer">
                                        <div class="answer-label">您的回答</div>
                                        <p>Spring Boot的自动配置是一种根据添加的依赖自动配置应用程序的机制。</p>
                                    </div>
                                    <div class="example-answer">
                                        <div class="example-label">参考回答</div>
                                        <p>Spring Boot自动配置是其核心特性之一，它通过@EnableAutoConfiguration注解启用，会根据项目中添加的依赖jar包自动配置相应的组件和服务。自动配置基于条件注解（如@ConditionalOnClass、@ConditionalOnMissingBean等）来决定是否创建特定的Bean，这样可以极大简化配置过程，让开发者专注于业务逻辑实现。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="btn btn-primary" onclick="window.location.href='/interview/list'">返回面试列表</button>
            <button class="btn btn-secondary" onclick="window.location.href='/interview/create'">创建新面试</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化雷达图
            initSkillsRadarChart();
        });

        // 初始化技能雷达图
        function initSkillsRadarChart() {
            const ctx = document.getElementById('skillsRadarChart').getContext('2d');
            
            // 尝试从后端获取数据，如果没有则使用默认数据
            let technicalScore = /*[[${analysis?.technicalScore}]]*/ 75;
            let communicationScore = /*[[${analysis?.communicationScore}]]*/ 80;
            let problemSolvingScore = /*[[${analysis?.problemSolvingScore}]]*/ 70;
            let learningScore = /*[[${analysis?.learningScore}]]*/ 85;
            let teamworkScore = /*[[${analysis?.teamworkScore}]]*/ 75;
            let matchingScore = /*[[${analysis?.matchingScore}]]*/ 75;
            
            // 确保分数是数字类型
            technicalScore = parseFloat(technicalScore) || 75;
            communicationScore = parseFloat(communicationScore) || 80;
            problemSolvingScore = parseFloat(problemSolvingScore) || 70;
            learningScore = parseFloat(learningScore) || 85;
            teamworkScore = parseFloat(teamworkScore) || 75;
            matchingScore = parseFloat(matchingScore) || 75;
            
            // 保存图表实例到全局变量
            window.skillsRadarChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['专业能力', '沟通能力', '解决问题', '学习能力', '团队合作', '岗位匹配度'],
                    datasets: [{
                        label: '您的评分',
                        data: [technicalScore, communicationScore, problemSolvingScore, learningScore, teamworkScore, matchingScore],
                        backgroundColor: 'rgba(67, 97, 238, 0.2)',
                        borderColor: 'rgba(67, 97, 238, 0.8)',
                        pointBackgroundColor: 'rgba(67, 97, 238, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(67, 97, 238, 1)'
                    }, {
                        label: '目标评分',
                        data: [90, 90, 90, 90, 90, 90],
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        borderColor: 'rgba(40, 167, 69, 0.4)',
                        borderDash: [5, 5],
                        pointBackgroundColor: 'rgba(40, 167, 69, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(40, 167, 69, 1)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            angleLines: {
                                display: true,
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            pointLabels: {
                                font: {
                                    size: 12
                                }
                            },
                            suggestedMin: 0,
                            suggestedMax: 100,
                            ticks: {
                                stepSize: 20,
                                backdropColor: 'transparent'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    label += context.raw + '%';
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
        }

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 监听选项卡切换，确保雷达图正确渲染
        const tabElements = document.querySelectorAll('#resultTabs button');
        tabElements.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function() {
                if (this.getAttribute('aria-controls') === 'overview') {
                    // 延迟一下再更新图表，确保DOM已经渲染完成
                    setTimeout(() => {
                        if (window.skillsRadarChart) {
                            window.skillsRadarChart.update();
                        }
                    }, 100);
                }
            });
        });
    </script>
</body>
</html>